<script setup lang="ts">
  import { defineProps, ref, watch, reactive } from 'vue';
  import { TableRowSelection, Notification } from '@arco-design/web-vue';
  import { useBooleanStore } from '@/store';
  import {
    callUnpackPalletCode,
    queryAoByPackage,
  } from '@/api/sorting-matching';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '工作包编号',
      dataIndex: 'packageCode',
      width: 180,
    },

    {
      title: '架次',
      dataIndex: 'startPlaneNo',
      width: 80,
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
      width: 180,
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      width: 180,
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      width: 180,
    },
    {
      title: '分拣数量',
      dataIndex: 'packageCount',
      width: 90,
    },
    {
      title: '需求数量',
      dataIndex: 'itemQty',
      width: 90,
    },
    {
      title: '托盘号',
      dataIndex: 'palletCode',
      width: 160,
    },
    {
      title: '缓存箱号',
      dataIndex: 'workbinCode',
      width: 160,
    },
    {
      title: '分拣状态',
      dataIndex: 'sortingStatus',
      width: 120,
    },
  ];
  const selectedKeys = ref<any>([]);
  const rowSelection: TableRowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });

  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(30);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.list || [];
      total.value = props.tableData?.total || 0;
    },
    { immediate: true }
  );
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  // 校验数据里面的子数据和父数据是存在
  function filterData(data: any, selectedKey: any) {
    return data.reduce((acc: any, item: any) => {
      // 检查当前项是否在选中的 keys 中
      if (selectedKey.includes(item.id)) {
        acc.push(item);
      }

      // 如果有子数据，递归检查子数据
      if (item.children && item.children.length > 0) {
        const filteredChildren = filterData(item.children, selectedKey);
        if (filteredChildren.length > 0) {
          acc.push({
            ...item,
            children: filteredChildren, // 添加符合条件的子数据
          });
        }
      }

      return acc;
    }, []);
  }
  // 拆箱叫包
  async function onPack(recode: any) {
    if (selectedKeys.value.length === 0) {
      Notification.error({
        title: '错误',
        content: '请勾选数据',
        closable: true,
      });
      return;
    }
    const selected = filterData(localTableData.value, selectedKeys.value);

    const data = await callUnpackPalletCode(selected);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message ? data.message : '请求失败',
        closable: true,
      });
    }
    booleanStore.watchUpdate(11);
  }

  // 点击行
  async function showBottomData(recode: any) {
    if (!recode.PAGEHELPER_ROW_ID) {
      return;
    }
    // console.log(recode);
    const data: any = await queryAoByPackage({
      msTaskPackageId: recode.msTaskPackageId,
    });
    // console.log(data);

    recode.children = data || [];
  }

  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 23);
  });
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">工作包拆包</div>
    </template>
    <a-button type="primary" @click="onPack">拆箱叫包</a-button>
    <a-table
      v-model:selectedKeys="selectedKeys"
      :stripe="true"
      class="top-table"
      :pagination="false"
      row-key="id"
      :row-selection="rowSelection"
      :columns="columns"
      :data="localTableData"
      :scroll="{ y: 400 }"
      style="height: 250px"
      @row-click="showBottomData"
    >
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        :page-size-options="[30, 50, 100, 500]"
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </a-card>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
    margin-top: 10px;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .table {
    margin-left: 10px;
    white-space: nowrap;
  }
</style>
